<template>
    <div class="main-Contain">
        <!-- region logo标志 -->
        <x-img :src="logoSrc" class="logo"></x-img>
        <!-- endregion logo标志 -->

        <!-- region 标语 -->
        <div class="slogan">
            <x-img :src="sloganSrc" class="logo"></x-img>
        </div>
        <!-- endregion 标语 -->

        <!-- region 视频 -->
        <div class="video">
            <video id="video" controls="controls" preload="none" playsinline="true" webkit-playsinline="true"
                   x5-video-player-fullscreen=”true”                             style="object-fit: fill;"
                   src="../../static/advertising.mp4"
                   poster="../../static/videoLoading.png"
                   type="video/mp4"></video>
        </div>
        <!-- endregion 视频 -->

        <!-- region 浮动图片元素 -->
        <x-img :src="flowerOneSrc" class="flower-one"></x-img>
        <x-img :src="flowerTwoSrc" class="flower-two"></x-img>
        <x-img :src="flowerThreeSrc" class="flower-three"></x-img>
        <x-img :src="ringSrc" class="ring"></x-img>
        <x-img :src="lzlSrc" class="lzl"></x-img>
        <!-- endregion 浮动图片元素 -->

        <!-- region 参与游戏按钮 -->
        <div class="playGame" @click="skipUserInfo">
            <button>参与游戏</button>
        </div>
        <!-- endregion 参与游戏按钮 -->
    </div>
</template>

<script>
  import {XImg} from 'vux'

  export default {
    components: {
      XImg
    },
    data () {
      return {
        logoSrc: require('../assets/images/common/logo.png'),
        sloganSrc: require('../assets/images/main/slogan.png'),
        flowerOneSrc: require('../assets/images/main/flower1.png'),
        flowerTwoSrc: require('../assets/images/main/flower2.png'),
        flowerThreeSrc: require('../assets/images/main/flower3.png'),
        ringSrc: require('../assets/images/common/ringRight.png'),
        lzlSrc: require('../assets/images/main/lzl.png'),
        isJoin: false   // 是否已参与过活动
      }
    },
    created () {
      this.initUrlParams()
      this.initActivity()
      if (this.$device.isWechat) {
        this.wxInit()
      } else {
        this.$vux.toast.show('请在微信浏览器中打开')
      }
    },
    mounted () {
      this.initWXBmgPlay()
      this.videoPlay()
    },
    methods: {
      /**
       * 初始化微信配置
       */
      wxInit () {
        this.$utils.WeiXin.init(null, () => {
          this.wxShare()
        })
      },
      /**
       * 微信分享
       */
      wxShare () {
        let activityNo = this.$utils.localStorage.get('activityNo')
        let link = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdb3c9c5015f2e23a&redirect_uri=http://nbb.njcool.cn/cemni2/?activityNo={0}&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect'.format(activityNo)
        this.$utils.WeiXin.share({
          title: '玩抽奖，抢志玲门票丨千年珠宝品牌招商峰会', // 分享标题
          desc: '玩抽奖，抢志玲门票丨千年珠宝品牌招商峰会', // 分享描述
          link: link, // 分享链接
          imgUrl: '../../static/share.png', // 分享图标
          success() {
            this.$vux.alert.show({content: '分享成功回调'})
          },
          cancel() {
            this.$vux.alert.show({content: '取消分享回调'})
          }
        })
      },
      /**
       *  解决ios微信无法自动播放
       */
      initWXBmgPlay () {
        let audio = document.querySelector('audio')
        if (audio) {
          audio.pause()
          this.$parent.$data.bgmShow = false
          this.$parent.$data.audioPlay = false
        }
        document.addEventListener('WeixinJSBridgeReady', () => {
          let audio = document.querySelector('audio')
          if (audio) {
            audio.pause()
            this.$parent.$data.bgmShow = false
            this.$parent.$data.audioPlay = false
          }
        }, false)
      },
      videoPlay () {
        document.addEventListener('WeixinJSBridgeReady', () => {
          let video = document.querySelector('#video')
          if (video !== null) {
            video.play()
          }
        }, false)
      },
      /**
       * 初始化url参数
       */
      initUrlParams() {
        let openId = this.$utils.Common.getParam('openId')
        let activityNo = this.$utils.Common.getParam('activityNo')
        this.$utils.localStorage.set('openId', openId)
        this.$utils.localStorage.set('activityNo', activityNo)
      },
      initActivity() {
        this.$store.dispatch('queryJoinActivity', {openId: this.$utils.localStorage.get('openId')}).then(res => {
          console.log('queryJoinActivity:', res)
          this.isJoin = res.join
        })
      },
      /**
       * 跳转到用户信息页面
       */
      skipUserInfo() {
        if (this.isJoin) {
          this.$router.push({path: '/gift', query: {isJoin: this.isJoin}})
        } else {
          this.$router.push({path: '/userInfo'})
        }
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
    @import '../assets/styles/pages/main';
</style>
